import React, { Component } from "react"
import './top.css'
import { Link, withRouter } from "react-router-dom"


class TopList extends Component {
    componentDidMount() {
        this.props.topList()
    }

    render() {
        let { topListDetail } = this.props
        console.log(this.props)

        return (
            <div className="clear" id="topList">
                {/* <Link to="/Range/topListDetails"> */}
                    {this.props.info.filter(item => {
                        if (item.tracks.length > 0) {
                            return item
                        }

                    })
                        .map(item => {
                            // console.log(item.tracks[0])

                            return (
                                <div key={item.id} className="top" onClick={() => {
                                    topListDetail(item.id).then(res => {
                                        let id = res.data.playlist.id
                                        this.props.history.push({ pathname: "/Range/topListDetails/" + id });

                                    });

                                }}>
                                    <div className="imgWrap">
                                        <img src={item.coverImgUrl} alt="" />
                                        <span>{item.updateFrequency}</span>
                                    </div>
                                    <div className="tracks">
                                        {item.tracks.map((value, i) => {

                                            return (
                                                <p key={value.first}>
                                                    {i + 1}.{value.first}
                                                    --
                                                {value.second}
                                                </p>
                                            )

                                        }
                                        )
                                        }

                                    </div>
                                </div>
                            )
                        })}
                    <h3 id="gRange">全球媒体榜</h3>
                    <div id="GlobalRangeWrap">
                    {this.props.info.filter(item => {
                        if (item.tracks.length == 0) {
                            return item
                        }
                    })
                        .map(item => {
                            return (
                                <div key={item.id} className="top GlobalRange " onClick={() => {
                                    topListDetail(item.id).then(res => {
                                        let id = res.data.playlist.id
                                        this.props.history.push({ pathname: "/Range/topListDetails/" + id });

                                    });

                                }}>
                                    <div className="imgWrap GlobalRangeImg">
                                        <img src={item.coverImgUrl} alt="" />
                                        <span>{item.updateFrequency}</span>
                                    </div>
                                    <div className="tracks">
                                        {item.tracks.map((value, i) => {
                                            return (
                                                <p key={value.first}>
                                                    {i + 1}.{value.first}
                                                    --
                                            {value.second}
                                                </p>
                                            )
                                        })}
                                    </div>
                                </div>
                            )
                        })
                    }
                    </div>
                {/* </Link> */}



            </div>


        )



    }
}

export default withRouter(TopList)